{% extends 'home/public/base.html' %}

{% block title %}
    <title>确认订单</title>
{% endblock %}

{% block css %}
<link rel="stylesheet" type="text/css" href="/static/home/css/cart.css">
<link rel="stylesheet" type="text/css" href="/static/home/css/cart-app.css">
{% endblock %}

{% block paths %}
<div class="navbar-left">
    <ol class="breadcrumb">
        <li class="active" >购物车</li>
        <li style="color:red;">确认订单</li>
        <li>在线支付</li>
        <li>完成 </li>
    </ol>
</div>
{% endblock %}

{% block con %}
<div class="mainbody cart" style="padding-top: 80px;">
    <div class="container">
        <div class="row" style="background: #fff;">
            <div class="col-md-10">
               <h3 style="padding-top: 10px;">收货地址</h3>
               <!-- Button trigger modal -->
               <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal">
                    新增地址
               </button>

               <!-- Modal -->
               <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                 <div class="modal-dialog" role="document">
                   <div class="modal-content">
                     <div class="modal-header">
                       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                       <h4 class="modal-title" id="myModalLabel">新增地址</h4>
                     </div>
                    <form>
                     <div class="modal-body">
                         <div class="form-group">
                           <label >收货人</label>
                           <input type="text" name="addressname" class="form-control">
                         </div>
                         <div class="form-group">
                           <label >收货地址</label>
                           <input type="text" name="address" class="form-control">
                         </div>

                         <div class="form-group">
                           <label >收货电话</label>
                           <input type="text" name="addressphone" class="form-control">
                         </div>

                         <div class="checkbox">
                           <label>
                             <input type="checkbox" name="status" value="1"> 是否默认
                           </label>
                         </div>

                     </div>
                     <div class="modal-footer">
                       <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                       <button type="button" class="btn btn-primary" id="CreateAddress">添加</button>
                     </div>
                    </form>
                   </div>
                 </div>
               </div>

            </div>
            <br><br><br>
            {% for v in adds %}
                {% if v.status %}
                <div class="col-md-3" >
                    <address aid="{{ v.id }}" isstatus='true' style="border:2px dashed #f39;">
                      <strong>{{ v.addressname }}</strong><br>
                     {{ v.address }}<br>
                      <abbr title="Phone">P:</abbr>{{ v.addressphone }}
                      <span style="color: red;">默认地址</span>
                    </address>
                </div>
                {% else %}
                <div class="col-md-3" >
                    <address  aid="{{ v.id }}" style="border:2px solid #ccc;">
                      <strong>{{ v.addressname }}</strong><br>
                     {{ v.address }}<br>
                      <abbr title="Phone">P:</abbr>{{ v.addressphone }}
                    </address>
                </div>
                {% endif %}
            {% endfor %}


        </div>

        <!-- 购物车详情头 -->
        <table class="cart-header">
            <tbody>
                <tr>
                    <td class="cart-col-select col-md-3 col-xs-3 col-sm-3">
                        <div class="cart-select-all JSelectAll">
                            <span class="cart-select-title">商品缩略图</span>
                        </div>
                    </td>
                    <td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品</td>
                    <td class="cart-col-price col-md-2 hidden-xs hidden-sm">单价(元)</td>
                    <td class="cart-col-number col-md-2 hidden-xs hidden-sm">数量</td>
                    <td class="cart-col-total col-md-1 hidden-xs hidden-sm">小计(元)</td>
                </tr>
            </tbody>
        </table><!-- 购物车详情头 E-->

        <!-- 购物清单信息列表 -->
        <div class="cart-merchant-list">
            <div class="cart-merchant">
                <table class="cart-merchant-body">
                    <tbody>
                        <!-- {4:{}} -->
                    {% for v in  data.values %}
                        <tr class="cart-product"  gid="{{ v.gid }}">
                            <td class="cart-col-select col-md-3 col-xs-4 col-sm-4">
                                <a href="meilanx.html" class="cart-product-link" target="_blank">
                                    <img src="{{ v.pic }}" class="cart-product-img" alt="魅蓝 X">
                                </a>
                            </td>
                            <td class="cart-col-name col-md-3 col-xs-8 col-sm-8">
                                <a href="meilanx.html" class="cart-product-link" target="_blank">
                                  <p>{{ v.title }}</p>
                                </a>
                            </td>
                            <td class="cart-col-price col-md-2 hidden-xs hidden-sm">
                                <p>
                                    <span class="cart-product-price">{{ v.price }}</span>
                                </p>
                            </td>
                            <td class="cart-col-number col-md-2 hidden-xs hidden-sm">
                                <div class="cart-product-number-adder">
                                    <p class="cart-product-number-max show"></p>
                                    <div class="mz-adder">
                                        <div class="mz-adder-num">
                                            {{ v.num }}
                                        </div>
                                    </div>
                                </div>
                            </td>
                            {% load pagetag %}
                            <td class="cart-col-total col-md-1 hidden-xs hidden-sm">
                                <span class="cart-product-price total">{% ShowTotal v.num v.price %}</span>
                            </td>

                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div><!-- 购物清单信息列表 E-->
    </div>
    <!-- 结算详情 -->
    <div class="cart-footer" id="cartFooter">
        <div class="container">
           <div class="cart-footer-left col-md-6 col-xs-4 col-sm-4">
               <div class="cart-select-all JSelectAll" data-mdesc="全选按钮" data-mtype="store_cart_all">
                    <div class="mz-checkbox"></div>
                    <span class="cart-select-title">全选</span>
               </div>
               <!-- <span class="cart-remove-selected" id="removeSelected">删除选中的商品</span> -->
               <span class="cart-footer-count">
                    共
                    <span class="cart-footer-num" id="totalCount">5</span>
                    件商品
               </span>
            </div>
            <div class="cart-footer-right col-md-5 col-md-offset-1 col-sm-offset-2 col-xs-8 col-sm-6">
                <span class="cart-footer-sum">
                    <span class="cart-footer-text">已优惠</span>
                    <span class="cart-footer-num red" id="totalDiscount">0.00</span>
                    <span class="cart-footer-text">元， 合计(不含运费)：</span>
                    <span class="cart-footer-total" id="totalPrice">0.00</span>
                </span>








                <form action="{% url 'myhome_ordercreate' %}" method="post" style="display: inline-block;">
                    {% csrf_token %}
{#                    商品编号 ids #}
                    <input type="hidden" name="ids" value="{{ request.GET.ids }}">

                    <input type="hidden" name="addid" value="" >

                    <button class="mz-btn success" id="cartSubmit">提交订单</button>
                </form>








            </div>
        </div>
    </div><!-- 结算详情 E-->
</div>
{% endblock %}

{% block js %}
<script type="text/javascript">
    //回顶部
    backTop();
    //全选
    allSelect();

    // 获取默认地址
    $('address').each(function(){
        if($(this).attr('isstatus')){
            $('input[name=addid]').val($(this).attr('aid'))
        }
    })

    // 给所有的地址绑定单击事件
    $('address').click(function(){
        $('address').css('border','2px solid #ccc')
        $(this).css('border','2px dashed #f39')
        // siblings() 获取当前元素的所有同辈元素
        // $(this).parent().siblings().find('address')....
        // 获取当前点击的地址的id
        var aid = $(this).attr('aid')
        $('input[name=addid]').val(aid)
    })

    // 提交订单事件
    $('#cartSubmit').click(function(){
        // 判断当前是否选择了收货地址
        var addid = $('input[name=addid]').val()
        if(!addid){
            alert('没有选择收货地址')
            return false;
        }

    })





    // 运算总价
    totalNum()
    function totalNum(){
        totalprice = 0
        // 获取所有已经选中的元素的小计价格
        $('.cart-merchant-body').find('tr').each(function(){
            total = Number($(this).find('.total').text())
            totalprice += total

        })
        $('#totalPrice').text(totalprice)
    }

    // 地址的添加
    $('#CreateAddress').click(function(){
        var data = {}
        // 获取表单中的数据
        data.addressname = $(this).parents('form').find('input[name=addressname]').val()
        data.address = $(this).parents('form').find('input[name=address]').val()
        data.addressphone = $(this).parents('form').find('input[name=addressphone]').val()
        data.status = 0
        if( $(this).parents('form').find('input[name=status]').prop('checked')){
            data.status = 1
        }

        // 发送ajax 添加地址
        $.get('{% url "myhome_addressinsert" %}',data,function(data){
            if(data.error == 0){
                location.href=location.href
            }
            alert(data.msg)
        })


    })


</script>
{% endblock %}